<template>
  <div class="musicList">
    <div class="musicTop">
      <div class="title">发现更多</div>
      <div class="more">更多</div>
    </div>
    <div class="musicContent">
      <van-swipe :loop="false" :width="150" :show-indicators="false">
        <van-swipe-item
          v-for="item in recommend"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <img :src="item.picUrl" alt="" />
          <span class="playCount">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bofang2"></use>
            </svg>
            {{ changeNum(item.playCount) }}
          </span>
          <span class="names">{{ item.name }}</span>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { getRecommends } from "@/api/home";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      recommend: [],
    });

    function changeNum(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    }
    const goDetail = (id) => {
      router.push({
        path: "/itemmusic",
        query: {
          id,
        },
      });
    };
    onMounted(async () => {
      let res = await getRecommends();
      state.recommend = res.data.result;
    });
    return {
      ...toRefs(state),
      changeNum,
      goDetail,
    };
  },
};
</script>

<style scoped lang="less">
.musicList {
  margin-top: 20px;
  .musicTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .title {
      font-size: 16px;
    }
    .more {
      font-size: 14px;
      border: 1px solid orange;
      border-radius: 12px;
      padding: 4px 20px;
      color: orange;
    }
  }
  .van-swipe-item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 6px;
    border-radius: 6px;
    img {
      width: 100%;
      border-radius: 6px;
    }
    .playCount {
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      .icon {
        width: 16px;
        height: 16px;
        fill: #fff;
      }
    }
    .names {
      font-size: 14px;
      margin-top: 6px;
      color: gray;
    }
  }
}
</style>
